<template>
  <div v-for="(item, index) in datas" :key="'item' + index" class="array-item">
    <div class="element">
      <el-input-number v-if="items.type === 'number'" v-model="item.value" :disabled="disabled" />
      <el-checkbox v-else-if="items.type === 'boolean'" v-model="item.value" :disabled="disabled" />
      <div v-else-if="items.type === 'array'">
        <template v-for="(el, i) in item">
          <el-input-number v-if="el.type === 'number'" :key="'number' + i" v-model="el.value" class="m-1" :disabled="disabled" />
          <el-checkbox v-else-if="el.type === 'boolean'" :key="'boolean' + i" v-model="el.value" class="m-1" :disabled="disabled" />
          <el-input-number
            v-else-if="el.type === 'integer'"
            :key="'integer' + i"
            v-model="el.value"
            class="m-1"
            :step-strictly="true"
            :disabled="disabled"
          />
          <el-input v-else :key="'string' + i" v-model="el.value" class="m-1" :disabled="disabled" style="width: 100px" />
        </template>
      </div>
      <el-input v-else v-model="item.value" :disabled="disabled" style="width: 100%" />
    </div>
    <div class="btn">
      <el-button :icon="Plus" plain type="primary" class="m-2" :disabled="disabled" @click="handleAdd(index)"></el-button>
      <el-button :icon="Minus" plain type="danger" :disabled="index === 0 || disabled" @click="handleRemove(index)"></el-button>
    </div>
  </div>
</template>

<script setup name="ArrayelEment" lang="ts">
import { Plus, Minus } from '@element-plus/icons-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  items: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => []
  }
});
const datas = ref([]);
watch(
  () => props.data,
  () => {
    if (props.data) {
      initData();
    }
  }
);
const handleAdd = (index) => {
  if (props.items.type === 'array') {
    const arr = props.items.prefixItems.map((item) => {
      item.value = '';
      return item;
    });
    datas.value.splice(index + 1, 0, arr);
  } else {
    const obj = {
      value: ''
    };
    datas.value.splice(index + 1, 0, obj);
  }
};
const handleRemove = async (index) => {
  await proxy?.$modal.confirm('是否确认删除该数据?');
  datas.value.splice(index, 1);
};
const initData = () => {
  if (props.items.type === 'array') {
    if (!props.data.length) {
      const arr = props.items.prefixItems.map((el) => {
        if (el.type === 'number' || el.type === 'integer') {
          return { value: 0, type: el.type };
        } else {
          return { value: 0, type: el.type };
        }
      });
      datas.value = [arr];
    } else {
      datas.value = props.data.map((item) => {
        const arr = item.map((el, index) => {
          const type = props.items.prefixItems[index].type;
          return { value: el, type };
        });
        return arr;
      });
    }
  } else {
    if (!props.data.length) {
      datas.value = [{ value: '' }];
    } else {
      datas.value = props.data.map((item) => {
        return { value: item };
      });
    }
  }
};
const getData = () => {
  if (props.items.type === 'array') {
    return datas.value.map((item) => {
      return item.map((el) => {
        if (el.type === 'number' || 'integer') {
          return Number(el.value);
        } else {
          el.value;
        }
      });
    });
  } else {
    return datas.value.filter((item) => Boolean(item.value)).map((item) => item.value);
  }
};
defineExpose({
  getData
});
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.element {
  width: 810px;
}
.array-item {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
